前言

我們昨天討論了 if 判斷式，在漢堡與薯條的例題中，遇到一個狀況：同樣都是 10 元漢堡和 20 元薯條，可能 A 客人買的數量跟 B 客人買的不同，要一直從頭寫大同小異的程式。

所以，今天就要跟大家介紹便利好幫手：函式 function 。那麼廢話不多說，讓我們開始吧！

函式是什麼？

正如同上面講的，函式是幫助我們節省時間的好幫手。一般來說有兩種函式，一種是出廠設定就內建在 JS 裡的， JS 已經幫妳寫好，只要按照規定使用即可，例如我們昨天提到的 alert 和 prompt 。另一種則是讓使用者自己創造、設計的函式。

創造函式的方式很簡單：為他取一個名字，讓他有地方放入不同的參數，並告訴他他的功能是什麼。函式有幾種定義方式：

• 函式宣告
  最常見，寫法為 function 名稱(參數){指令};
• 函式運算式
  寫法為變數名稱 = function(參數){指令};
  如果這裡的函式沒名字，又稱匿名函式。
• 透過 new Function 關鍵字建立函式
  因為效率差比較少見，寫法為變數名稱 = new Function('參數','指令');

舉例來說，如果我們的漢堡固定 10 元，薯條 20 元，但顧客購買的數量可能不同，那麼我們的參數就可以設定為顧客購買的數量，而功能則可以設定為，幫我加好客人總共買了多少錢。以函式宣告的方式寫，會像下面的範例這樣：

const hamburgerPrice = 10; 
const friesPrice = 20; 

function totalPrice(hamburgerNum,friesNum){
  let total = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum);
  return "您好，您的總金額為"+total+"元";
};

console.log(totalPrice(1,0));
console.log(totalPrice(2,3));

前面一樣先宣告漢堡和薯條各多少，然後開始寫函式。我把這個函式取名為 totalPrice ，你當然也可以取其他的名字，只要容易辨識即可，命名規則與變數相同。

我的參數是漢堡與薯條的數量，要放在()裡面，用逗號隔開，一樣是可以客製化的取名。在{}裡要放這個函式的功能，最重要的當然就是算出總共多少錢囉！除了算出來之外，我還必須讓他顯示出計算結果才行。因此在這邊，我必須加上一個回傳值 return ，並在後面指示他要回傳的字串與變數。

最後，我可以用 console.log 測試一下功能是否正常。當我輸入console.log(totalPrice(1,0));，代表當我購買一個漢堡，零包薯條，總共是多少錢？電腦會跳出：您好，您的總金額為10元。

切記！如果要使用 console.log 回傳結果，一定要在 console.log 的括弧中加入函式的名稱。不然電腦不會通靈，不會知道你寫了一百個函式，是要他現在套用其中的哪一個函式啦！

如果改成函式運算式的寫法呢？

const hamburgerPrice = 10; 
const friesPrice = 20; 

let totalPrice = function (hamburgerNum,friesNum){
  let total = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum);
  return "您好，您的總金額為"+total+"元";
};

應該不難吧？

當然，不只可以使用 console.log ，我們也可以先在前面寫好函式，後面再使用它。例如我要寫一個函式讓電腦幫我加兩個數字，再跳出加完的結果，下面才去寫說我要加哪兩個數字。可以這樣做：

function add(n1,n2){
  alert(n1+n2);
};

add(1,2);

return 回傳值

在這裡我們先暫停一下，來討論什麼是回傳值。

回傳值代表函式已經結束，回傳到呼叫的意思。換句話說，如果我今天已經寫了 return ，但在他後面又接著寫其他的式子，那麼後面的式子不會被執行。

舉例來說，下面的函式不論是 total 還是 total2 都能得到答案，因為兩個都列在 return 前面。當我用 console.log 測試時，可以得到共買了 12 個物品 20 元的答案。

function totalPrice(a,b){
  let total = a+b;
  let total2 = a*b;
  return "您好，您買了"+total+"個物品，總金額為"+total2+"元";
};
console.log(totalPrice(10,2));

但如果我今天寫的是下面的程式，則會得到錯誤訊息 Cannot access 'total2' before initialization 。因為 total2 被放到 return 的後面了。

function totalPrice(a,b){
  let total = a+b;
  return "您好，您買了"+total+"個物品，總金額為"+total2+"元";
  let total2 = a*b;
};
console.log(totalPrice(10,2));

好！那如果我根本從頭到尾都沒提到 return ，會發生什麼事呢？

function totalPrice(a,b){
  let total = a+b;
  let total2 = a*b;
};
console.log(totalPrice(10,2));

你可以試著寫寫看，就會發現上面的程式，顯示出 undefined 。先講結論：在表達式中，必須要搭配使用 return 才能回傳數值。我的同學 AngusWu 說了一個我覺得很精準的形容：有寫 return 的函式可以當作數值，沒有寫的函式只能當成一個行為。

下面就讓我娓娓道來...

表達式、陳述式

是這樣的，程式分成兩種，一種會產生計算的結果，一種不會。舉例來說，宣告變數並不會產生計算結果，通常在執行環境及被執行，並且不能被放在預期會產生數值的地方。而運算(例如加減乘除)則會產生計算結果。

會產生結果值的程式碼，我們稱為表達式 Expression ，反之稱為陳述式 Statement 。

除了宣告變數之外， if 判斷式、 while for 迴圈、 switch 判斷式、 for-in 迴圈和直接的函式宣告，都算陳述式。

函式練習題

說了這麼多，終於要回來練習函式囉！讓我們一起來寫寫看這題吧：

漢堡 10 元，薯條 20 元，現在來了三個不同的客人。 A 的錢包有 200 元，買了兩個漢堡四包薯條。 B 的錢包有 150 元，買五包薯條。 C 的錢包有 100 元，買了兩個漢堡一包薯條。

請問，你要怎麼讓電腦用 JS 計算他們各剩下多少錢，並且秀出：「 A 買完東西後，剩下 XX 元」呢？提醒你，別忘了先確認一下有哪幾個參數喔。

想到了嗎？這題的答案就讓我們下次揭曉囉！晚安~ 我們明天見！

學習與參考資料

JS 學徒特訓班教學影片及練習題 10 關